<template>
  <div class='userEdit'>
    姓名:<input class="input_name" type="text" name="name" v-model="name"></br>
    年龄:<input type="text" name="sex" v-model="age"></br>
    性别:<input type="radio" v-bind:checked="true" value="男" v-model="sex">
    <label>男</label><input type="radio" value="女" v-model="sex">
    <label>女</label>
    </br>
    头像:<input class="photo" type="text" name="photo" v-model="photo" placeholder="请输入图片的http地址"></br>
    <button v-on:click="modify">保存</button>
    </br>
  </div>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      lodding: true,
      name: Date.now(),
      sex: '男',
      age: 20,
      photo: 'https://banzhenyu.github.io/img/sky.jpg'
    }
  },
  computed: {
    formatSex() {
      return this.sex === '男士' ? 1 : 0
    }
  },
  methods: {
    modify() {
      this.lodding = true;
      this.$post(this.$Api.API_USER_INFO_MODIFY, {
        name: this.name,
        sex: this.formatSex,
        age: this.age,
        photo: this.photo
      }).then(res => {
        this.$router.go(-1);
        this.lodding = false;
      }, err => {
        alert(err);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.userEdit {
  text-align: left;
  width: 440px;
  height: 440px;
  border: solid 2px black;
}

input {
  margin-top: 10px;
  margin: 10px;
}

input .photo{
  width: 300px;
}
button {
  float: right;
  width: 50px;
  height: 30px;
}
</style>
